<template>
  <div calss="container">
    <div>slot 具名插槽</div>
    <!-- 匿名插槽 :没有名字的,传入组件所有的东西。都展示在这里
具名插槽
作用域插槽  -->
    <div>插槽内容展示</div>
    <Dialog>
      <h3 slot="header">标题</h3>
      <h3 slot="content">内容</h3>
      <h3 slot="footer">底部</h3>
      <!-- <div slot="123">匿名插槽</div> -->
    </Dialog>
    <div>
      mixin的使用========================<br />
      主要是为了实现复用,可以把vue中的所有的属性,提取到mixin里面去
      名字相同的时候，它有对应的覆盖规则：<br />
      如果是data属性同名，就是组件的属性覆盖mixin的属性;<br />
      属性值是对象的,是组件的覆盖mixin的 比方说filter过滤器 computed components
      生命周期是先执行mixin的再执行组件的 watch是和生命周期一致
      <!-- 复制苏总图片的部分注释——————————然后整个resize.js通过mixins属性引入这个文件,以及其他
            四个文件混入进来本来resizejs中的代码需要写五遍现在
            只需要写一遍就行.会自动的根据规则合并到每个文件中
            目前知道的规则有:
            1.如果data重复会组件的覆盖mixin的
            2如果值是对象的.比方说methods.computed,directives,
            等当键名冲突时候.组件的覆盖mixin的
            比方说两个getlnit方法那么执行组件的,不执行mixin里面
            的
            3如果值为函数比方说生命周期钩子,那么会先执行mixin里
            面的再执行被混入组件的,不会被覆盖
            当然mixin还可以嵌套使用哦也就是说mixin里面还可以套
            着其它的mixin文件 -->
    </div>
    <div>来吧展示！<br />{{ title }}</div>
    <div>{{ obj.name }}</div>
    <div v-for="(v, i) in obj" :key="i">
      <div>{{ v | domFilters }}</div>
    </div>
    <button @click="updateObj">修改</button>
  </div>
</template>

<script>
import Dialog from "./dialog.vue";
import myMiXin from "../mixins/myMinXin";
export default {
  mixins: [myMiXin],
  data() {
    return {
      // title: "这是主页面的title",
      obj: {
        name: "这是主页面的对象的name属性",
      },
    };
  },
  filters: {
    domFilters(val) {
      console.log("主页面", val);
    },
  },
  watch: {
    ["obj.name"]: {
      handler(val) {
        console.log("主页面", val);
      },
      deep: true,
    },
  },
  // 计算属性
  computed: {},
  // 方法集合
  methods: {
    updateObj() {
      this.obj.name = "这是修改后的主页面的对象的name属性";
    },
  },
  // 生命周期 - DOM元素渲染前调用
  created() {
    // console.log("主页面的created");
  },
  // 生命周期 - DOM元素渲染后调用
  mounted() {},
  components: { Dialog },
};
</script>
<style lang='less' scoped>
</style>
